<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生请假申请表</title>
       <!-- 引入jQuery -->
       <script src="/static/jquery/jquery.min.js"></script>
       <!-- Bootstrap CSS -->
       <link href="/static/bootstrap/bootstrap.min.css" rel="stylesheet">
   
       <!-- 引入Vue.js -->
       <script src="/static/vue/vue.min.js"></script>
    <style>
        body {
            background-color: #f8f9fa;
            padding: 20px;
        }
        .leave-form {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        }
        .form-title {
            color: #0d6efd;
            margin-bottom: 25px;
            text-align: center;
            font-weight: bold;
        }
        .submit-btn {
            width: 100%;
            padding: 10px;
            font-size: 18px;
        }
        .time-input-group {
            display: flex;
            gap: 15px;
        }
        .time-input-group .form-group {
            flex: 1;
        }
        @media (max-width: 576px) {
            .time-input-group {
                flex-direction: column;
                gap: 0;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="leave-form">
            <h2 class="form-title">学生请假申请表</h2>
            
            <form @submit.prevent="submitForm">
                <!-- 学生基本信息 -->
                <div class="row mb-3">
                    <div class="col-md-4">
                        <label for="studentName" class="form-label">学生姓名</label>
                        <input type="text" class="form-control" id="studentName" v-model="formData.studentName" required>
                    </div>
                </div>
                
                <!-- 请假时间 -->
                <div class="mb-3">
                    <label class="form-label">请假时间</label>
                    <div class="time-input-group">
                        <div class="form-group">
                            <label for="startDate" class="form-label">开始日期</label>
                            <input type="date" class="form-control" id="startDate" v-model="formData.startDate" @change="calculateDuration" required>
                        </div>
                        <div class="form-group">
                            <label for="startTime" class="form-label">开始时间</label>
                            <input type="time" class="form-control" id="startTime" v-model="formData.startTime" @change="calculateDuration" required>
                        </div>
                    </div>
                </div>
                
                <div class="mb-3">
                    <div class="time-input-group">
                        <div class="form-group">
                            <label for="endDate" class="form-label">结束日期</label>
                            <input type="date" class="form-control" id="endDate" v-model="formData.endDate" @change="calculateDuration" required>
                        </div>
                        <div class="form-group">
                            <label for="endTime" class="form-label">结束时间</label>
                            <input type="time" class="form-control" id="endTime" v-model="formData.endTime" @change="calculateDuration" required>
                        </div>
                    </div>
                </div>
                
                <!-- 请假时长 -->
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="leaveDuration" class="form-label">请假时长</label>
                        <div class="input-group">
                            <input type="number" class="form-control" id="leaveDuration" v-model="formData.leaveDuration" min="0.5" step="0.5" required>
                            <span class="input-group-text">天</span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label for="leaveType" class="form-label">请假类型</label>
                        <select class="form-select" id="leaveType" v-model="formData.leaveType" required>
                            <option value="" disabled selected>请选择请假类型</option>
                            <option value="病假">病假</option>
                            <option value="事假">事假</option>
                            <option value="公假">公假</option>
                            <option value="其他">其他</option>
                        </select>
                    </div>
                </div>
                
                <!-- 请假原因 -->
                <div class="mb-4">
                    <label for="leaveReason" class="form-label">请假原因</label>
                    <textarea class="form-control" id="leaveReason" rows="4" v-model="formData.leaveReason" required></textarea>
                </div>
                
                <!-- 提交按钮 -->
                <button type="submit" class="btn btn-primary submit-btn">提交请假申请</button>
                
                <!-- 表单验证提示 -->
                <div v-if="errorMessage" class="alert alert-danger mt-3">
                    {{ errorMessage }}
                </div>
            </form>
        </div>
    </div>

    <script>
        const { createApp, ref, computed } = Vue;
        
        createApp({
            setup() {
                const formData = ref({
                    studentName: '',
                    studentId: '',
                    className: '',
                    startDate: '',
                    startTime: '08:00',
                    endDate: '',
                    endTime: '17:00',
                    leaveDuration: 1,
                    leaveType: '',
                    leaveReason: ''
                });
                
                const errorMessage = ref('');
                
                // 计算请假时长
                const calculateDuration = () => {
                    if (!formData.value.startDate || !formData.value.endDate) return;
                    
                    const start = new Date(`${formData.value.startDate}T${formData.value.startTime}`);
                    const end = new Date(`${formData.value.endDate}T${formData.value.endTime}`);
                    
                    if (end < start) {
                        errorMessage.value = '结束时间不能早于开始时间';
                        return;
                    }
                    
                    errorMessage.value = '';
                    
                    // 计算天数差
                    const diffInMs = end - start;
                    const diffInDays = diffInMs / (1000 * 60 * 60 * 24);
                    
                    // 四舍五入到最近的0.5天
                    formData.value.leaveDuration = Math.round(diffInDays * 2) / 2;
                };
                
                // 提交表单
                const submitForm = () => {
                    if (!validateForm()) return;
                    
                    // 这里可以发送AJAX请求到后端
                    console.log('提交的请假数据:', formData.value);
                    alert('请假申请已成功提交！');
                    
                    // 重置表单
                    formData.value = {
                        studentName: '',
                        studentId: '',
                        className: '',
                        startDate: '',
                        startTime: '08:00',
                        endDate: '',
                        endTime: '17:00',
                        leaveDuration: 1,
                        leaveType: '',
                        leaveReason: ''
                    };
                };
                
                // 表单验证
                const validateForm = () => {
                    if (!formData.value.studentName || 
                        !formData.value.studentId || 
                        !formData.value.className || 
                        !formData.value.startDate || 
                        !formData.value.endDate || 
                        !formData.value.leaveType || 
                        !formData.value.leaveReason) {
                        errorMessage.value = '请填写所有必填字段';
                        return false;
                    }
                    
                    const start = new Date(`${formData.value.startDate}T${formData.value.startTime}`);
                    const end = new Date(`${formData.value.endDate}T${formData.value.endTime}`);
                    
                    if (end < start) {
                        errorMessage.value = '结束时间不能早于开始时间';
                        return false;
                    }
                    
                    errorMessage.value = '';
                    return true;
                };
                
                return {
                    formData,
                    errorMessage,
                    calculateDuration,
                    submitForm
                };
            }
        }).mount('#app');
    </script>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>